<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>组件练习</title>
</head>
<body>
        <div id="app">
                <todo-header></todo-header>
            
                <todo-list></todo-list>
              </div>
            
              <!-- <div id="root">
                <todo-header></todo-header>
              </div> -->
            
              <script src="../lib/vue.js"></script>
              <script>
                // 定义组件的选项对象：TodoHeader
                const todoHeaderOptions = {
                  template: `
                    <div>
                      <h1>主标题</h1>
                      <h2>副标题</h2>
                    </div>
                  `
                }
            
                // 定义 TodoItem 组件选项
                const todoItemOptions = {
                  template: `
                    <li>
                      <span>{{ title }}</span>
                      <button>修改</button>
                      <button @click="remove">删除</button>
                    </li>
                  `,
                  data() {
                    return {
                      title: '标题'
                    }
                  },
                  methods: {
                    remove() {
                      console.log('删除待办事项')
                    }
                  }
                }
            
                // 定义TodoList 组件选项
                const todoListOptions = {
                  template: `
                    <ul>
                      <li>所有待办事项</li>
                      <todo-item v-for="n in 10"></todo-item>
                      <li v-for="n in 10" is="todo-item"></li>
                    </ul>
                  `,
                  components: { // 局部注册组件
                    // 组件名: 选项对象
                    TodoItem: todoItemOptions
                  }
                }
            
                // 注册组件
                // 全局注册
                Vue.component('TodoHeader', todoHeaderOptions)
                Vue.component('TodoList', todoListOptions)
            
                // 使用组件
                // 将组件名作为标签名（类似于自定义标签）方式来使用
                new Vue({
                  el: '#app'
                })
            
                // new Vue({
                //   el: '#root'
                // })
              </script>
</body>
</html>